<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
	var CustomPage = function(conf)
	{
		this.topDiv = $('#top_bar');
		this.centerDiv = $('#center_layout');
		this.centerTable = $('#center_table');
		this.gridToolBarDiv = document.getElementById('toolbar');
		this.buttomDiv = $('#buttom_bar');
		//初始化配置
		var innerConf ={
			/*模块名称*/
			moduleName:'accountGroup',
			/*按钮*/
			buttons:[],
			/*查询字段*/
			queryFields:[{name:'status',label:'状态',value:'1'}],
			/*表格配置*/
			gridParams:{
				maxHeight : 600,
				idField : 'id'
			},
			/*分页配置*/
			paginationParams:{
				//默认分页大小
				pageSize:10,
			},
			/*请求配置*/
			requestParams:{
				url: 'get_users.php',
				saveUrl: 'save_user.php',
				updateUrl: 'update_user.php',
				destroyUrl: 'destroy_user.php',
				loadUrl:'${pageContext.request.contextPath}/pages/professional_manage/getPage.do',
				saveUrl:'${pageContext.request.contextPath}/pages/professional_manage/save.do',
				deleteUrl:'${pageContext.request.contextPath}/pages/professional_manage/delete.do'
			}
		};
		$.extend(innerConf,conf);
		this.conf =innerConf;
		//构建查询栏
		if(this.conf.queryFields)
		{
			
		}
		
		//构建表格
		if(this.conf.gridParams)
		{
			this.centerTable.datagrid({
				url : this.loadUrl,
				width : 'auto',
				height : 'auto',
				// 是否显示分页
				pagination : true,
				// 是否显示行号
				rownumbers : true,
				// True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
				fitColumns : true,
				// True 就把行条纹化。（即奇偶行使用不同背景色）
				striped : true,
				// 单选
				singleSelect : true,
				columns:[this.conf.gridParams['columns']],
				onHeaderContextMenu: function(e, field){
					e.preventDefault();
					if (!$('#tmenu').length){
						createColumnMenu();
					}
					$('#tmenu').menu('show', {
						left:e.pageX,
						top:e.pageY
					});
				}
			});
			//自适应gird大小
			$(window).resize(function() {
				console.log(this);
				console.log(typeof(this));
				/* this.callee().centerTable.datagrid("resize", {
					height : 'auto',
					width:'auto'
				}); */
			});
		}
		
		//构建表格工具栏
		if(this.conf.gridToolBar)
		{	
			for(var i=0;i<this.conf.gridToolBar.length;i++)
			{
				var btnConf = this.conf.gridToolBar[i];
				var opa = document.createElement('a');
				opa.id=btnConf.urlKey;
				opa.plain=true;
				opa.innerHTML=btnConf.text;
				opa.onclick=btnConf.handler?btnConf.handler:this.getDefaultEvent(btnConf['iconCls']);
				this.gridToolBarDiv.appendChild(opa);
				$('#'+btnConf.urlKey).linkbutton({
					iconCls:btnConf['iconCls'],
					plain:'true'
				});
			}
			/* <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">新增</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">保存</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">取消</a>
			*/
		}
		
		//构建分页栏
		if(this.conf.paginationParams)
		{
			/*$('#pagination_bar').pagination({
				total:114,
				onSelectPage:function(pageNumber, pageSize){
					$(this).pagination('loading');
					alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
					$(this).pagination('loaded');
				}
			});*/
		}
		//返回内容页
		return this;
	};
	
	//打开新增窗口
	CustomPage.addForm = function(){
		
	}
	
	//打开修改窗口
	CustomPage.updateForm = function(id)
	{
		var selectIds = $('#center_table').datagrid('getSelected');
		if (selectIds == null) {
			$.messager.alert(Common.Constant.message_warning, Common.Constant.message_warning_data, 'warning');
		} 
	}
	
	//删除数据
	CustomPage.deleteRecord = function(id)
	{
		var selectIds = $('#center_table').datagrid('getSelected');
		if (selectIds == null) {
			$.messager.alert(Common.Constant.message_warning, Common.Constant.message_warning_data, 'warning');
		} 
	}
	
	//根据icon样式默认选择处理方法
	CustomPage.prototype.getDefaultEvent = function(btnIconCls){
		if(btnIconCls=='icon-save')
		{
			return CustomPage.addForm;
		}
		else if(btnIconCls=='icon-edit')
		{
				return CustomPage.updateForm;//.call(this.centerTable.datagrid('getSelected'));
		}
		else if(btnIconCls == 'icon-remove')
		{
			return CustomPage.deleteRecord;
		}
	}
	
	function createColumnMenu(){
		var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
		var fields = $('#center_table').datagrid('getColumnFields');
		for(var i=0; i<fields.length; i++){
			$('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
		}
		tmenu.menu({
			onClick: function(item){
				if (item.iconCls=='icon-ok'){
					$('#center_table').datagrid('hideColumn', item.text);
					tmenu.menu('setIcon', {
						target: item.target,
						iconCls: 'icon-empty'
					});
				} else {
					$('#center_table').datagrid('showColumn', item.text);
					tmenu.menu('setIcon', {
						target: item.target,
						iconCls: 'icon-ok'
					});
				}
			}
		});
	}
	
	$(function(){
		var conf = {};
		conf.gridToolBar = [{urlKey:'addAccount',text:'增加',iconCls:'icon-save'},
		                    {urlKey:'removeAccount',text:'删除',iconCls:'icon-remove'},
		                    {urlKey:'updateAccount',text:'修改',iconCls:'icon-edit'}
		];
		conf.gridParams={
				columns:[
								{field:'id',title:'编号',width:80},
								{field:'productid',title:'产品编号',width:120},
								{field:'listprice',title:'单价',width:80,align:'right'},
								{field:'unitcost',title:'单位',width:80,align:'right'}
							]
		};
		var page = new CustomPage(conf);
	});
</script>
</head>
<body style="text-align:center;">
	<h2>demo</h2>
	<div id="top_bar" class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>顶部区域</div>
	</div>
	<div id="center_layout" class="easyui-layout" style="width:700px;height:400px;">
		<div region="north" style="overflow:hidden;height:60px;padding:10px">
			<h2>查询区域</h2>
		</div>
		<!-- <div region="east" icon="icon-reload" title="East" split="true" style="width:180px;">
		</div>
		<div region="west" split="true" title="West" style="width:100px;">
		</div> -->
		<div id="center_layout" region="center"  style="background:#fafafa;overflow:hidden;height:100%;">
			<div id="toolbar">
			</div>
			<table id="center_table">
			</table>
		</div>
		<div id="buttom_bar" region="south" style="height:50px;background:#fafafa;">
			<div id="pagination_bar"></div>
		</div>
	</div>
	<!-- 编辑账户-->
	<div id="edit_account"
		style="display: none; width: 300px; height: 220px; top: 0px; left: 0px;"
		title='<spring:message code="window.account.edit"/>'>
		<form id="edit_account_form" method="post">
			<table width="280px" border="0">
				<tr>
					<td><div align="right"><spring:message code="lable.account.account"/></div></td>
					<td><div align="left">
							<input type="hidden" name="id" id="id"> <input
								type="text" class="easyui-validatebox" value="" name="account" invalidMessage="{remote:'<spring:message code="message.info.account.existaccount"/>'}"
								required="true" id="account_" event="change" validType ="loginName&length[1,8]&remote[existaccount_+'?accountId='+$('#id').val(),'account','jsoncallback=?']"/>
						</div></td>
				</tr>
				<tr>

					<td><div align="right"><spring:message code="lable.account.accountnm"/></div></td>
					<td><div align="left">
							<input type="text" class="easyui-validatebox" value=""
								name="accountNm" required="true"/>
						</div></td>
				</tr>
				<tr>
					<td><div align="right"><spring:message code="lable.account.usermobile"/></div></td>
					<td><div align="left">
							<input type="text" class="easyui-validatebox" value="" invalidMessage="{remote:'<spring:message code="message.info.account.existmobile"/>'}"
								name="userMobile" validType="mobile&remote[existmobile_+'?accountId='+$('#id').val(),'userMobile','jsoncallback=?']" event="change"/>
						</div></td>
				</tr>
				<tr>
					<td><div align="right"><spring:message code="lable.account.useremail"/></div></td>
					<td><div align="left">
							<input type="text" class="easyui-validatebox" value="" invalidMessage="{remote:'<spring:message code="message.info.account.existemail"/>'}"
								name="userEmail" required="true" validType="email&remote[existemail_+'?accountId='+$('#id').val(),'userEmail','jsoncallback=?']" event="change" />
						</div></td>
				</tr>
				<tr id="roles_tr">
					<td><div align="right"><spring:message code="lable.account.arrelations"/></div></td>
					<td><div align="left">
							<select name="roles" style="width: 155px" id="edit_roles"></select>
						</div></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>